// Clearfix
// --------
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

// Center-align a block level element
// ----------------------------------
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Sizing shortcuts
// -------------------------
.size(@width: 5px, @height: 5px) {
  width: @width;
  height: @height;
}
.square(@size: 5px) {
  .size(@size, @size);
}

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  :-moz-placeholder {
    color: @color;
  }
  ::-webkit-input-placeholder {
    color: @color;
  }
}

// Opacity
.opacity(@opacity: 100) {
  opacity: @opacity / 100;
   filter: ~"alpha(opacity=@{opacity})";
}

// Text overflow
// -------------------------
// Requires inline-block or block for proper styling
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 简单的圆角半径
.border-radius (@radius: 5px) {
	/*-webkit-border-radius: @radius;
	-moz-border-radius: @radius;*/
	border-radius: @radius;
}

// 四角的半径定制 
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius: @arguments;
	-moz-border-radius: @arguments;
	border-radius: @arguments;
}


// 方块阴影 Box Shadow 
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @color:rgba(0, 0, 0, 0.5)) {
	-webkit-box-shadow: @x @y @blur @color;
	-moz-box-shadow: @x @y @blur @color;
	box-shadow: @x @y @blur @color;
}

//　元素过渡效果 Transition
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
}

// 转换/旋转 Transform
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

// 线性渐变 Linear Gradient
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop);
	background-image: -moz-linear-gradient(@origin, @start, @stop);
	background-image: -o-linear-gradient(@origin, @start, @stop);
	background-image: -ms-linear-gradient(@origin, @start, @stop);
	background-image: linear-gradient(@origin, @start, @stop);
}
.gradient3 (@origin: left, @start: #ffffff, @stop: #000000, @end: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop, @end);
	background-image: -moz-linear-gradient(@origin, @start, @stop, @end);
	background-image: -o-linear-gradient(@origin, @start, @stop, @end);
	background-image: -ms-linear-gradient(@origin, @start, @stop, @end);
	background-image: linear-gradient(@origin, @start, @stop, @end);
}

// 快速渐变 Quick Gradient 
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}

// 镜像效果 Webkit Reflection
.reflect (@length: 50%, @opacity: 0.2){
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

//颜色计算 Color Math 
//互补色方案 Complementary Color Scheme
//---------------------------------------------
//@base: #663333;
//@complement1: spin(@base, 180);
//@complement2: darken(spin(@base, 180), 5%);
//@lighten1: lighten(@base, 15%);
//@lighten2: lighten(@base, 30%);

//颜色微调 Subtle Color Scheme
//---------------------------------------------
//@base: #663333;
//@lighter1: lighten(spin(@base, 5), 10%);
//@lighter2: lighten(spin(@base, 10), 20%);
//@darker1: darken(spin(@base, -5), 10%);
//@darker2: darken(spin(@base, -10), 20%);



.ma(@margin: 10px) {
	margin:@margin;
}
.mh(@margin:10px){
	margin-left:@margin;
	margin-right:@margin;
}
.mv(@margin:10px){
	margin-top:@margin;
	margin-bottom:@margin;
}
.mt(@margin:10px){
	margin-top:@margin;
}
.mb(@margin:10px){
	margin-bottom:@margin;
}
.ml(@margin:10px){
	margin-left:@margin;
}
.mr(@margin:10px){
	margin-right:@margin;
}

.pa(@padding: 10px) {
	padding:@padding;
}
.ph(@padding:10px){
	padding-left:@padding;
	padding-right:@padding;
}
.pv(@padding:10px){
	padding-top:@padding;
	padding-bottom:@padding;
}
.pt(@padding:10px){
	padding-top:@padding;
}
.pb(@padding:10px){
	padding-bottom:@padding;
}
.pl(@padding:10px){
	padding-left:@padding;
}
.pr(@padding:10px){
	padding-right:@padding;
}
.bgimg(@img){
	background-image:url('@{img}'); 
	background-repeat:no-repeat;
}
.bgpos(@x, @y){
	background-position:@x @y;
}

.blur(@blur) {
  -webkit-filter: blur(@blur); /* Chrome, Opera */
  -moz-filter: blur(@blur);
  -ms-filter: blur(@blur);
  filter: blur(@blur);
}